<template>
  <div>
    <MainSection title="Tweet" :loading="loading">

      <Head>
        <Title></Title>
      </Head>
      <TweetDetails :user="user" :tweet="tweet" />
    </MainSection>
  </div>
</template>
<script setup>
const loading = ref(false)
const tweet = ref(null)
const { getTweetById } = useTweets()
const { useAuthUser } = useAuth()
const user = useAuthUser()
const getTweetIdFromRoute =()=>{

  return  window.location.pathname.slice(8)
}
const getTweet = async ()=> {
  loading.value = true
  let id =  getTweetIdFromRoute()
  try {
    const response = await getTweetById(id)
    tweet.value = response.tweet
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false
  }
}
watch(() => useRoute().fullPath, getTweet)
onBeforeMount(getTweet)
</script>